<template>
  <div class="exam-result-page">
    <!-- 结果头部 -->
    <div class="result-header">
      <div class="container">
        <div class="result-card" :class="resultStatus">
          <div class="result-icon">
            <el-icon v-if="resultStatus === 'passed'" class="success-icon">
              <CircleCheck />
            </el-icon>
            <el-icon v-else-if="resultStatus === 'failed'" class="fail-icon">
              <CircleClose />
            </el-icon>
            <el-icon v-else class="pending-icon">
              <Clock />
            </el-icon>
          </div>
          
          <div class="result-content">
            <h1 class="result-title">
              {{ resultStatus === 'passed' ? '恭喜通过考试！' : 
                 resultStatus === 'failed' ? '很遗憾，未通过考试' : '考试结果待出' }}
            </h1>
            
            <div class="result-score">
              <span class="score-label">得分：</span>
              <span class="score-value">{{ examResult?.score || 0 }}</span>
              <span class="score-total">/ {{ examResult?.totalScore || 100 }}</span>
            </div>
            
            <div class="result-meta">
              <div class="meta-item">
                <span class="meta-label">考试时间：</span>
                <span class="meta-value">{{ formatDate(examResult?.submitTime) }}</span>
              </div>
              <div class="meta-item">
                <span class="meta-label">用时：</span>
                <span class="meta-value">{{ formatDuration(examResult?.timeUsed) }}</span>
              </div>
              <div class="meta-item">
                <span class="meta-label">正确率：</span>
                <span class="meta-value">{{ examResult?.accuracy || 0 }}%</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 详细结果 -->
    <div class="result-content">
      <div class="container">
        <div class="content-layout">
          <!-- 左侧统计信息 -->
          <div class="result-stats">
            <div class="stats-card">
              <h3 class="card-title">考试统计</h3>
              
              <div class="stats-grid">
                <div class="stat-item">
                  <div class="stat-icon correct">
                    <el-icon><Check /></el-icon>
                  </div>
                  <div class="stat-info">
                    <div class="stat-value">{{ examResult?.correctCount || 0 }}</div>
                    <div class="stat-label">答对题数</div>
                  </div>
                </div>
                
                <div class="stat-item">
                  <div class="stat-icon wrong">
                    <el-icon><Close /></el-icon>
                  </div>
                  <div class="stat-info">
                    <div class="stat-value">{{ examResult?.wrongCount || 0 }}</div>
                    <div class="stat-label">答错题数</div>
                  </div>
                </div>
                
                <div class="stat-item">
                  <div class="stat-icon total">
                    <el-icon><Document /></el-icon>
                  </div>
                  <div class="stat-info">
                    <div class="stat-value">{{ examResult?.totalQuestions || 0 }}</div>
                    <div class="stat-label">总题数</div>
                  </div>
                </div>
                
                <div class="stat-item">
                  <div class="stat-icon time">
                    <el-icon><Clock /></el-icon>
                  </div>
                  <div class="stat-info">
                    <div class="stat-value">{{ formatDuration(examResult?.timeUsed) }}</div>
                    <div class="stat-label">用时</div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 分数分布 -->
            <div class="score-chart-card">
              <h3 class="card-title">分数分布</h3>
              <div class="score-chart">
                <div class="chart-container">
                  <div class="score-ring">
                    <svg viewBox="0 0 120 120" class="ring-svg">
                      <circle
                        cx="60"
                        cy="60"
                        r="50"
                        fill="none"
                        stroke="var(--el-border-color-light)"
                        stroke-width="8"
                      />
                      <circle
                        cx="60"
                        cy="60"
                        r="50"
                        fill="none"
                        :stroke="scoreColor"
                        stroke-width="8"
                        stroke-linecap="round"
                        :stroke-dasharray="circumference"
                        :stroke-dashoffset="strokeDashoffset"
                        transform="rotate(-90 60 60)"
                        class="progress-ring"
                      />
                    </svg>
                    <div class="ring-content">
                      <div class="ring-score">{{ examResult?.score || 0 }}</div>
                      <div class="ring-label">分</div>
                    </div>
                  </div>
                </div>
                
                <div class="score-breakdown">
                  <div class="breakdown-item">
                    <div class="breakdown-color correct"></div>
                    <span class="breakdown-label">正确</span>
                    <span class="breakdown-value">{{ examResult?.correctCount || 0 }}题</span>
                  </div>
                  <div class="breakdown-item">
                    <div class="breakdown-color wrong"></div>
                    <span class="breakdown-label">错误</span>
                    <span class="breakdown-value">{{ examResult?.wrongCount || 0 }}题</span>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 操作按钮 -->
            <div class="result-actions">
              <el-button type="primary" @click="viewAnswers">
                <el-icon><View /></el-icon>
                查看答案解析
              </el-button>
              
              <el-button v-if="canRetake" @click="retakeExam">
                <el-icon><Refresh /></el-icon>
                重新考试
              </el-button>
              
              <el-button @click="downloadCertificate" v-if="resultStatus === 'passed'">
                <el-icon><Download /></el-icon>
                下载证书
              </el-button>
              
              <el-button @click="shareResult">
                <el-icon><Share /></el-icon>
                分享成绩
              </el-button>
              
              <el-button @click="goBack">
                <el-icon><Back /></el-icon>
                返回
              </el-button>
            </div>
          </div>
          
          <!-- 右侧题目解析 -->
          <div class="answer-analysis">
            <div class="analysis-card">
              <div class="card-header">
                <h3 class="card-title">答题解析</h3>
                <div class="filter-tabs">
                  <el-radio-group v-model="analysisFilter" size="small">
                    <el-radio-button label="all">全部</el-radio-button>
                    <el-radio-button label="correct">正确</el-radio-button>
                    <el-radio-button label="wrong">错误</el-radio-button>
                  </el-radio-group>
                </div>
              </div>
              
              <div class="analysis-list">
                <div
                  v-for="(question, index) in filteredQuestions"
                  :key="question.id"
                  class="analysis-item"
                  :class="{
                    correct: question.isCorrect,
                    wrong: !question.isCorrect
                  }"
                >
                  <div class="question-header">
                    <div class="question-info">
                      <span class="question-number">第 {{ question.index + 1 }} 题</span>
                      <span class="question-type">{{ getQuestionTypeText(question.type) }}</span>
                      <span class="question-score">{{ question.score }} 分</span>
                    </div>
                    
                    <div class="question-status">
                      <el-icon v-if="question.isCorrect" class="correct-icon">
                        <CircleCheck />
                      </el-icon>
                      <el-icon v-else class="wrong-icon">
                        <CircleClose />
                      </el-icon>
                    </div>
                  </div>
                  
                  <div class="question-content">
                    <div class="question-text" v-html="question.text"></div>
                    
                    <!-- 选择题答案 -->
                    <div v-if="['single', 'multiple', 'judge'].includes(question.type)" class="answer-options">
                      <div
                        v-for="option in question.options"
                        :key="option.id"
                        class="option-item"
                        :class="{
                          correct: question.correctAnswer.includes(option.id),
                          selected: question.userAnswer.includes(option.id),
                          wrong: question.userAnswer.includes(option.id) && !question.correctAnswer.includes(option.id)
                        }"
                      >
                        <div class="option-content">
                          <span class="option-label">{{ option.label }}</span>
                          <span class="option-text">{{ option.text }}</span>
                        </div>
                        
                        <div class="option-status">
                          <el-icon v-if="question.correctAnswer.includes(option.id)" class="correct-mark">
                            <Check />
                          </el-icon>
                          <el-icon v-else-if="question.userAnswer.includes(option.id)" class="wrong-mark">
                            <Close />
                          </el-icon>
                        </div>
                      </div>
                    </div>
                    
                    <!-- 填空题答案 -->
                    <div v-else-if="question.type === 'fill'" class="fill-answers">
                      <div
                        v-for="(blank, blankIndex) in question.blanks"
                        :key="blankIndex"
                        class="fill-item"
                      >
                        <div class="fill-label">第 {{ blankIndex + 1 }} 空：</div>
                        <div class="fill-content">
                          <div class="user-answer" :class="{ wrong: !blank.isCorrect }">
                            <span class="answer-label">你的答案：</span>
                            <span class="answer-value">{{ blank.userAnswer || '未作答' }}</span>
                          </div>
                          <div class="correct-answer">
                            <span class="answer-label">正确答案：</span>
                            <span class="answer-value">{{ blank.correctAnswer }}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                    
                    <!-- 简答题答案 -->
                    <div v-else-if="question.type === 'essay'" class="essay-answers">
                      <div class="user-answer">
                        <div class="answer-label">你的答案：</div>
                        <div class="answer-content">{{ question.userAnswer || '未作答' }}</div>
                      </div>
                      <div class="reference-answer">
                        <div class="answer-label">参考答案：</div>
                        <div class="answer-content">{{ question.referenceAnswer }}</div>
                      </div>
                    </div>
                    
                    <!-- 答案解析 -->
                    <div v-if="question.explanation" class="answer-explanation">
                      <div class="explanation-header">
                        <el-icon><InfoFilled /></el-icon>
                        <span>答案解析</span>
                      </div>
                      <div class="explanation-content" v-html="question.explanation"></div>
                    </div>
                  </div>
                </div>
                
                <div v-if="filteredQuestions.length === 0" class="empty-state">
                  <el-empty description="暂无数据" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 分享对话框 -->
    <el-dialog
      v-model="showShareDialog"
      title="分享成绩"
      width="500px"
    >
      <div class="share-content">
        <div class="share-card">
          <div class="share-header">
            <h3>{{ examResult?.examTitle }}</h3>
            <div class="share-score">{{ examResult?.score }}/{{ examResult?.totalScore }}</div>
          </div>
          
          <div class="share-stats">
            <div class="share-stat">
              <span class="stat-label">正确率：</span>
              <span class="stat-value">{{ examResult?.accuracy }}%</span>
            </div>
            <div class="share-stat">
              <span class="stat-label">用时：</span>
              <span class="stat-value">{{ formatDuration(examResult?.timeUsed) }}</span>
            </div>
          </div>
          
          <div class="share-footer">
            <span>来自 {{ appName }}</span>
          </div>
        </div>
        
        <div class="share-actions">
          <el-button @click="copyShareLink">
            <el-icon><Link /></el-icon>
            复制链接
          </el-button>
          
          <el-button @click="shareToWeChat">
            <el-icon><ChatDotRound /></el-icon>
            微信分享
          </el-button>
          
          <el-button @click="shareToWeibo">
            <el-icon><Share /></el-icon>
            微博分享
          </el-button>
        </div>
      </div>
      
      <template #footer>
        <el-button @click="showShareDialog = false">关闭</el-button>
      </template>
    </el-dialog>
    
    <!-- 加载状态 -->
    <Loading v-if="loading" />
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  CircleCheck, CircleClose, Clock, Check, Close, Document, View, Refresh,
  Download, Share, Back, InfoFilled, Link, ChatDotRound
} from '@element-plus/icons-vue'
import { useExamStore } from '@/stores/exam'
import { useUserStore } from '@/stores/user'
import { useAppStore } from '@/stores/app'
import Loading from '@/components/common/Loading.vue'
import { formatDate, formatDuration } from '@/utils/format'

const route = useRoute()
const router = useRouter()
const examStore = useExamStore()
const userStore = useUserStore()
const appStore = useAppStore()

// 响应式数据
const loading = ref(false)
const examResult = ref(null)
const analysisFilter = ref('all')
const showShareDialog = ref(false)

// 计算属性
const appName = computed(() => appStore.appName || '在线学习平台')

const resultStatus = computed(() => {
  if (!examResult.value) return 'pending'
  
  if (examResult.value.status === 'grading') {
    return 'pending'
  }
  
  return examResult.value.score >= examResult.value.passingScore ? 'passed' : 'failed'
})

const canRetake = computed(() => {
  if (!examResult.value) return false
  
  const exam = examResult.value.exam
  if (!exam) return false
  
  // 检查重考次数限制
  if (exam.maxAttempts && examResult.value.attemptNumber >= exam.maxAttempts) {
    return false
  }
  
  // 检查重考时间限制
  if (exam.retakeInterval) {
    const lastAttemptTime = new Date(examResult.value.submitTime)
    const now = new Date()
    const timeDiff = now - lastAttemptTime
    const intervalMs = exam.retakeInterval * 60 * 60 * 1000 // 转换为毫秒
    
    if (timeDiff < intervalMs) {
      return false
    }
  }
  
  return true
})

const filteredQuestions = computed(() => {
  if (!examResult.value?.questions) return []
  
  let questions = examResult.value.questions
  
  if (analysisFilter.value === 'correct') {
    questions = questions.filter(q => q.isCorrect)
  } else if (analysisFilter.value === 'wrong') {
    questions = questions.filter(q => !q.isCorrect)
  }
  
  return questions
})

// 分数环形图相关计算
const circumference = computed(() => 2 * Math.PI * 50)
const scorePercentage = computed(() => {
  if (!examResult.value) return 0
  return (examResult.value.score / examResult.value.totalScore) * 100
})
const strokeDashoffset = computed(() => {
  return circumference.value - (scorePercentage.value / 100) * circumference.value
})
const scoreColor = computed(() => {
  if (scorePercentage.value >= 80) return 'var(--el-color-success)'
  if (scorePercentage.value >= 60) return 'var(--el-color-warning)'
  return 'var(--el-color-danger)'
})

// 方法
const loadExamResult = async () => {
  try {
    loading.value = true
    const resultId = route.params.id
    
    examResult.value = await examStore.getExamResult(resultId)
    
  } catch (error) {
    ElMessage.error('加载考试结果失败')
    console.error('Load exam result error:', error)
  } finally {
    loading.value = false
  }
}

const getQuestionTypeText = (type) => {
  const typeMap = {
    single: '单选题',
    multiple: '多选题',
    judge: '判断题',
    fill: '填空题',
    essay: '简答题'
  }
  return typeMap[type] || '未知题型'
}

const viewAnswers = () => {
  // 滚动到答案解析区域
  const analysisElement = document.querySelector('.answer-analysis')
  if (analysisElement) {
    analysisElement.scrollIntoView({ behavior: 'smooth' })
  }
}

const retakeExam = async () => {
  try {
    const confirmResult = await ElMessageBox.confirm(
      '确定要重新考试吗？重考将消耗一次考试机会。',
      '重新考试',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    if (confirmResult === 'confirm') {
      router.push(`/exam/${examResult.value.examId}`)
    }
  } catch (error) {
    // 用户取消
  }
}

const downloadCertificate = async () => {
  try {
    loading.value = true
    
    const certificateUrl = await examStore.generateCertificate(examResult.value.id)
    
    // 创建下载链接
    const link = document.createElement('a')
    link.href = certificateUrl
    link.download = `${examResult.value.examTitle}_证书.pdf`
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    
    ElMessage.success('证书下载成功')
    
  } catch (error) {
    ElMessage.error('证书下载失败')
    console.error('Download certificate error:', error)
  } finally {
    loading.value = false
  }
}

const shareResult = () => {
  showShareDialog.value = true
}

const copyShareLink = async () => {
  try {
    const shareUrl = `${window.location.origin}/exam-result/${examResult.value.id}`
    
    if (navigator.clipboard) {
      await navigator.clipboard.writeText(shareUrl)
    } else {
      // 兼容性处理
      const textArea = document.createElement('textarea')
      textArea.value = shareUrl
      document.body.appendChild(textArea)
      textArea.select()
      document.execCommand('copy')
      document.body.removeChild(textArea)
    }
    
    ElMessage.success('链接已复制到剪贴板')
    
  } catch (error) {
    ElMessage.error('复制链接失败')
  }
}

const shareToWeChat = () => {
  // 微信分享逻辑
  ElMessage.info('请使用微信扫码分享功能')
}

const shareToWeibo = () => {
  // 微博分享逻辑
  const shareText = `我在${appName.value}完成了《${examResult.value.examTitle}》考试，得分${examResult.value.score}分！`
  const shareUrl = `${window.location.origin}/exam-result/${examResult.value.id}`
  const weiboUrl = `https://service.weibo.com/share/share.php?url=${encodeURIComponent(shareUrl)}&title=${encodeURIComponent(shareText)}`
  
  window.open(weiboUrl, '_blank')
}

const goBack = () => {
  router.push('/exams')
}

// 生命周期
onMounted(() => {
  loadExamResult()
})
</script>

<style lang="scss" scoped>
.exam-result-page {
  min-height: 100vh;
  background: var(--el-bg-color-page);
}

// 结果头部
.result-header {
  background: linear-gradient(135deg, var(--el-color-primary-light-8) 0%, var(--el-color-primary-light-9) 100%);
  padding: 48px 0;
  
  .result-card {
    background: var(--el-bg-color);
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 32px;
    
    &.passed {
      border-left: 6px solid var(--el-color-success);
      
      .result-icon {
        background: var(--el-color-success-light-8);
        
        .success-icon {
          color: var(--el-color-success);
        }
      }
    }
    
    &.failed {
      border-left: 6px solid var(--el-color-danger);
      
      .result-icon {
        background: var(--el-color-danger-light-8);
        
        .fail-icon {
          color: var(--el-color-danger);
        }
      }
    }
    
    &.pending {
      border-left: 6px solid var(--el-color-warning);
      
      .result-icon {
        background: var(--el-color-warning-light-8);
        
        .pending-icon {
          color: var(--el-color-warning);
        }
      }
    }
    
    .result-icon {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      
      .el-icon {
        font-size: 40px;
      }
    }
    
    .result-content {
      flex: 1;
      
      .result-title {
        font-size: 2rem;
        font-weight: 600;
        color: var(--el-text-color-primary);
        margin-bottom: 16px;
        line-height: 1.2;
      }
      
      .result-score {
        display: flex;
        align-items: baseline;
        gap: 8px;
        margin-bottom: 20px;
        
        .score-label {
          font-size: 1.1rem;
          color: var(--el-text-color-regular);
        }
        
        .score-value {
          font-size: 3rem;
          font-weight: 700;
          color: var(--el-color-primary);
          line-height: 1;
        }
        
        .score-total {
          font-size: 1.5rem;
          color: var(--el-text-color-secondary);
        }
      }
      
      .result-meta {
        display: flex;
        gap: 32px;
        
        .meta-item {
          display: flex;
          gap: 8px;
          
          .meta-label {
            color: var(--el-text-color-secondary);
          }
          
          .meta-value {
            color: var(--el-text-color-primary);
            font-weight: 500;
          }
        }
      }
    }
  }
}

// 详细结果
.result-content {
  padding: 32px 0;
  
  .content-layout {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 32px;
    align-items: flex-start;
  }
}

// 统计信息
.result-stats {
  display: flex;
  flex-direction: column;
  gap: 24px;
  
  .stats-card,
  .score-chart-card {
    background: var(--el-bg-color);
    border-radius: 12px;
    border: 1px solid var(--el-border-color-lighter);
    padding: 24px;
    
    .card-title {
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--el-text-color-primary);
      margin-bottom: 20px;
    }
  }
  
  .stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    
    .stat-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px;
      background: var(--el-fill-color-extra-light);
      border-radius: 8px;
      
      .stat-icon {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        
        &.correct {
          background: var(--el-color-success-light-8);
          color: var(--el-color-success);
        }
        
        &.wrong {
          background: var(--el-color-danger-light-8);
          color: var(--el-color-danger);
        }
        
        &.total {
          background: var(--el-color-info-light-8);
          color: var(--el-color-info);
        }
        
        &.time {
          background: var(--el-color-warning-light-8);
          color: var(--el-color-warning);
        }
      }
      
      .stat-info {
        .stat-value {
          font-size: 1.2rem;
          font-weight: 600;
          color: var(--el-text-color-primary);
          line-height: 1.2;
        }
        
        .stat-label {
          font-size: 12px;
          color: var(--el-text-color-secondary);
        }
      }
    }
  }
  
  .score-chart {
    .chart-container {
      display: flex;
      justify-content: center;
      margin-bottom: 24px;
      
      .score-ring {
        position: relative;
        width: 120px;
        height: 120px;
        
        .ring-svg {
          width: 100%;
          height: 100%;
          transform: rotate(-90deg);
          
          .progress-ring {
            transition: stroke-dashoffset 0.5s ease-in-out;
          }
        }
        
        .ring-content {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          text-align: center;
          
          .ring-score {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--el-text-color-primary);
            line-height: 1;
          }
          
          .ring-label {
            font-size: 12px;
            color: var(--el-text-color-secondary);
          }
        }
      }
    }
    
    .score-breakdown {
      display: flex;
      justify-content: space-between;
      
      .breakdown-item {
        display: flex;
        align-items: center;
        gap: 8px;
        
        .breakdown-color {
          width: 12px;
          height: 12px;
          border-radius: 2px;
          
          &.correct {
            background: var(--el-color-success);
          }
          
          &.wrong {
            background: var(--el-color-danger);
          }
        }
        
        .breakdown-label {
          font-size: 12px;
          color: var(--el-text-color-secondary);
        }
        
        .breakdown-value {
          font-size: 12px;
          font-weight: 500;
          color: var(--el-text-color-primary);
        }
      }
    }
  }
  
  .result-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    
    .el-button {
      justify-content: flex-start;
    }
  }
}

// 答题解析
.answer-analysis {
  .analysis-card {
    background: var(--el-bg-color);
    border-radius: 12px;
    border: 1px solid var(--el-border-color-lighter);
    overflow: hidden;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24px;
      border-bottom: 1px solid var(--el-border-color-lighter);
      
      .card-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--el-text-color-primary);
        margin: 0;
      }
    }
    
    .analysis-list {
      max-height: 800px;
      overflow-y: auto;
      
      .analysis-item {
        padding: 24px;
        border-bottom: 1px solid var(--el-border-color-extra-light);
        
        &:last-child {
          border-bottom: none;
        }
        
        &.correct {
          border-left: 4px solid var(--el-color-success);
          background: var(--el-color-success-light-9);
        }
        
        &.wrong {
          border-left: 4px solid var(--el-color-danger);
          background: var(--el-color-danger-light-9);
        }
        
        .question-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 16px;
          
          .question-info {
            display: flex;
            gap: 12px;
            align-items: center;
            
            .question-number {
              font-weight: 600;
              color: var(--el-color-primary);
            }
            
            .question-type {
              background: var(--el-color-info-light-8);
              color: var(--el-color-info);
              padding: 2px 6px;
              border-radius: 4px;
              font-size: 12px;
            }
            
            .question-score {
              background: var(--el-color-warning-light-8);
              color: var(--el-color-warning);
              padding: 2px 6px;
              border-radius: 4px;
              font-size: 12px;
            }
          }
          
          .question-status {
            .correct-icon {
              color: var(--el-color-success);
              font-size: 20px;
            }
            
            .wrong-icon {
              color: var(--el-color-danger);
              font-size: 20px;
            }
          }
        }
        
        .question-content {
          .question-text {
            font-size: 15px;
            line-height: 1.6;
            color: var(--el-text-color-primary);
            margin-bottom: 16px;
          }
          
          .answer-options {
            margin-bottom: 16px;
            
            .option-item {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 8px 12px;
              margin-bottom: 8px;
              border-radius: 6px;
              border: 1px solid var(--el-border-color-lighter);
              
              &.correct {
                background: var(--el-color-success-light-9);
                border-color: var(--el-color-success-light-5);
              }
              
              &.wrong {
                background: var(--el-color-danger-light-9);
                border-color: var(--el-color-danger-light-5);
              }
              
              &.selected:not(.correct) {
                background: var(--el-color-danger-light-9);
                border-color: var(--el-color-danger-light-5);
              }
              
              .option-content {
                display: flex;
                gap: 8px;
                align-items: flex-start;
                
                .option-label {
                  font-weight: 600;
                  color: var(--el-color-primary);
                  flex-shrink: 0;
                }
                
                .option-text {
                  color: var(--el-text-color-primary);
                }
              }
              
              .option-status {
                .correct-mark {
                  color: var(--el-color-success);
                }
                
                .wrong-mark {
                  color: var(--el-color-danger);
                }
              }
            }
          }
          
          .fill-answers {
            margin-bottom: 16px;
            
            .fill-item {
              margin-bottom: 12px;
              
              .fill-label {
                font-weight: 500;
                color: var(--el-text-color-primary);
                margin-bottom: 8px;
              }
              
              .fill-content {
                display: flex;
                flex-direction: column;
                gap: 8px;
                
                .user-answer,
                .correct-answer {
                  display: flex;
                  gap: 8px;
                  
                  .answer-label {
                    font-size: 14px;
                    color: var(--el-text-color-secondary);
                    min-width: 80px;
                  }
                  
                  .answer-value {
                    font-size: 14px;
                    color: var(--el-text-color-primary);
                    padding: 4px 8px;
                    background: var(--el-fill-color-light);
                    border-radius: 4px;
                  }
                }
                
                .user-answer.wrong .answer-value {
                  background: var(--el-color-danger-light-9);
                  color: var(--el-color-danger);
                }
                
                .correct-answer .answer-value {
                  background: var(--el-color-success-light-9);
                  color: var(--el-color-success);
                }
              }
            }
          }
          
          .essay-answers {
            margin-bottom: 16px;
            
            .user-answer,
            .reference-answer {
              margin-bottom: 12px;
              
              .answer-label {
                font-weight: 500;
                color: var(--el-text-color-primary);
                margin-bottom: 8px;
              }
              
              .answer-content {
                padding: 12px;
                background: var(--el-fill-color-light);
                border-radius: 6px;
                line-height: 1.6;
                color: var(--el-text-color-primary);
                white-space: pre-wrap;
              }
            }
            
            .reference-answer .answer-content {
              background: var(--el-color-success-light-9);
              border: 1px solid var(--el-color-success-light-5);
            }
          }
          
          .answer-explanation {
            background: var(--el-color-info-light-9);
            border: 1px solid var(--el-color-info-light-5);
            border-radius: 8px;
            padding: 16px;
            
            .explanation-header {
              display: flex;
              align-items: center;
              gap: 8px;
              margin-bottom: 12px;
              color: var(--el-color-info);
              font-weight: 500;
              
              .el-icon {
                font-size: 16px;
              }
            }
            
            .explanation-content {
              color: var(--el-text-color-primary);
              line-height: 1.6;
            }
          }
        }
      }
      
      .empty-state {
        padding: 40px;
        text-align: center;
      }
    }
  }
}

// 分享对话框
.share-content {
  .share-card {
    background: linear-gradient(135deg, var(--el-color-primary-light-8) 0%, var(--el-color-primary-light-9) 100%);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    text-align: center;
    
    .share-header {
      margin-bottom: 16px;
      
      h3 {
        font-size: 1.2rem;
        font-weight: 600;
        color: var(--el-text-color-primary);
        margin: 0 0 8px 0;
      }
      
      .share-score {
        font-size: 2rem;
        font-weight: 700;
        color: var(--el-color-primary);
      }
    }
    
    .share-stats {
      display: flex;
      justify-content: center;
      gap: 24px;
      margin-bottom: 16px;
      
      .share-stat {
        display: flex;
        gap: 4px;
        
        .stat-label {
          color: var(--el-text-color-secondary);
        }
        
        .stat-value {
          color: var(--el-text-color-primary);
          font-weight: 500;
        }
      }
    }
    
    .share-footer {
      color: var(--el-text-color-secondary);
      font-size: 14px;
    }
  }
  
  .share-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .result-content {
    .content-layout {
      grid-template-columns: 350px 1fr;
    }
  }
}

@media (max-width: 1024px) {
  .result-header {
    padding: 32px 0;
    
    .result-card {
      padding: 32px;
      flex-direction: column;
      text-align: center;
      gap: 24px;
      
      .result-content {
        .result-meta {
          justify-content: center;
          flex-wrap: wrap;
          gap: 16px;
        }
      }
    }
  }
  
  .result-content {
    .content-layout {
      grid-template-columns: 1fr;
      
      .result-stats {
        order: 2;
      }
      
      .answer-analysis {
        order: 1;
      }
    }
  }
}

@media (max-width: 768px) {
  .result-header {
    padding: 24px 0;
    
    .result-card {
      padding: 24px;
      
      .result-icon {
        width: 60px;
        height: 60px;
        
        .el-icon {
          font-size: 30px;
        }
      }
      
      .result-content {
        .result-title {
          font-size: 1.5rem;
        }
        
        .result-score {
          .score-value {
            font-size: 2.5rem;
          }
          
          .score-total {
            font-size: 1.2rem;
          }
        }
        
        .result-meta {
          .meta-item {
            font-size: 14px;
          }
        }
      }
    }
  }
  
  .result-stats {
    .stats-grid {
      grid-template-columns: 1fr;
    }
    
    .result-actions {
      .el-button {
        width: 100%;
      }
    }
  }
  
  .answer-analysis {
    .analysis-card {
      .card-header {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
      }
      
      .analysis-list {
        .analysis-item {
          padding: 16px;
          
          .question-header {
            flex-direction: column;
            gap: 12px;
            align-items: flex-start;
          }
        }
      }
    }
  }
  
  .share-content {
    .share-stats {
      flex-direction: column;
      gap: 8px;
    }
    
    .share-actions {
      flex-direction: column;
      
      .el-button {
        width: 100%;
      }
    }
  }
}

@media (max-width: 480px) {
  .result-header {
    .result-card {
      padding: 20px;
      
      .result-content {
        .result-title {
          font-size: 1.3rem;
        }
        
        .result-score {
          .score-value {
            font-size: 2rem;
          }
        }
      }
    }
  }
  
  .answer-analysis {
    .analysis-card {
      .analysis-list {
        .analysis-item {
          .question-content {
            .answer-options {
              .option-item {
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
              }
            }
            
            .fill-answers {
              .fill-item {
                .fill-content {
                  .user-answer,
                  .correct-answer {
                    flex-direction: column;
                    gap: 4px;
                    
                    .answer-label {
                      min-width: auto;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>